import { FC, useState } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import ReactPaginate from 'react-paginate'
import cardImg from '@/assets/images/market/market-card.png'
import beans from '@/assets/images/market/beans.png'
import pandas from '@/assets/images/market/pandas.png'
import expanded from '@/assets/images/market/expanded.png'
import wassies from '@/assets/images/market/wassies.png'
import azuki from '@/assets/images/market/azuki.png'
import kanpai from '@/assets/images/market/kanpai.png'
import otherdeed from '@/assets/images/market/otherdeed.png'
import wassiesby from '@/assets/images/market/wassiesby.png'
import azukibeans from '@/assets/images/market/azukibeans.png'
import arrow from '@/assets/images/market/bottom-arrow.png'


interface IRowItem {}

const RowItem: FC<IRowItem> = () => {


    const { t } = useTranslation()
    const [ cardList ] = useState([
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: cardImg
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: cardImg
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: cardImg
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: beans
        },
        {
            name: 'Kanpai Pandas',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: pandas
        },
        {
            name: 'Otherdeed Expanded',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: expanded
        },
        {
            name: 'Wassies by Wassies',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: wassies
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: azuki
        },
        {
            name: 'Kanpai Pandas',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: kanpai
        },
        {
            name: 'Otherdeed Expanded',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: otherdeed
        },
        {
            name: 'Wassies by Wassies',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: wassiesby
        },
        {
            name: 'Azuki Elemental Beans',
            floorName: 'floor',
            totalName: 'total',
            floor: '0.02 ETH',
            total: '10 ETH',
            type: 2,
            img: azukibeans
        },
    ])

	return (
        <>
            <div className="market-row-box">
                {
                    cardList.map((item, index) => (
                        <div className="row-item" key={index}>
                            <div className="content-box flex-align-center">
                                <div className="flex-center row-img">
                                    <img src={item.img} alt="" />
                                </div>
                                <div className="row-item-content">
                                    <p className="row-name">{item.name}</p>
                                    <div className="name-detail flex">
                                        <div className="row-floor">
                                            <span className="row-title">{t(`market.${item.floorName}`)}</span>
                                            <span className="row-floor-price">{item.floor}</span>
                                        </div>
                                        <div className="row-total">
                                            <span className="row-title">{t(`market.${item.totalName}`)}</span>
                                            <span className="row-total-price">{item.total}</span>
                                        </div>
                                    </div>
                                </div>
                                {
                                    item.type !== 3 && 
                                    <div className="row-sale-box">
                                        {
                                            item.type === 1 && <div className="row-purchase btn">{t('market.cardBtn1')}</div>
                                        }
                                        {
                                            item.type === 2 && <div className="row-cancel btn">{t('market.cardBtn3')}</div>
                                        }
                                    </div>
                                }
                            </div>
                            {
                                item.type === 3 && 
                                <div className="cancel-box flex-between">
                                    <div className="sell-amount flex-align-center">
                                        <div className="num-left flex-align-center">99.55</div>
                                        <div className="num-right flex-between">
                                            <span>SUI</span>
                                            <img src={arrow} alt="" />
                                        </div>
                                    </div>
                                    <div className="cancel-sell btn">{t('market.cardBtn3')}</div>
                                </div>
                            }
                        </div>
                    ))
                }
            </div>
            <div className="market-pagination">
                <ReactPaginate
                    breakLabel="..."
                    nextLabel="next Page >"
                    // onPageChange={handlePageClick}
                    pageRangeDisplayed={1}
                    className="paginate-market"
                    pageLinkClassName="link-a"
                    pageCount={33}
                    previousLabel="<"
                    renderOnZeroPageCount={null}
                />
            </div>
        </>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(RowItem)